<template>
	<div class="table-div">
		<!-- 表格头部面板 -->
		<div class="table-panel">
			<!-- 
                @keyup.native ---- 键盘松开事件
				@keyup.enter.native ---- 回车事件
             -->
			<el-input
				v-model="search.orderNo"
				placeholder="关键字查询"
				class="filter-item"
				@keyup.enter.native="initTableData"
				@keyup.native="initTableData"
			/>
			<!-- <el-button plain type="primary" icon="el-icon-plus" @click="addModel()">新增</el-button> -->
		</div>

		<!-- 
            表格
            @row-click ---- 行点击事件
			@select-all ---- 全选事件
			@select ---- 选择事件
            :default-sort="{ prop: 'id', order: 'descending' }"
        -->
		<el-table
			ref="list"
			:data="tableData.list"
			style="width: 100%; margin-top: 10px"
			border
			stripe
			highlight-current-row
			@sort-change="changeSort"
		>
			<!-- 
                sortable ---- 未开启后台分页时使用
                sortable="custom" ---- 开启后台分页时使用，table 中用 sort-change 监听排序点击事件
            -->
			
			<el-table-column property="orderNo" label="订单编号" width="150" align="center" sortable="custom"></el-table-column>
			<el-table-column label="订单状态">
					  <template slot-scope="scope">
						<span v-if="scope.row.orderStatus=='1'">运输中</span>
						<span v-else>待发货</span>
					  </template>
			</el-table-column>
			<el-table-column prop="orderItems" label="订单商品">
					  <template slot-scope="scope">
						<div v-for="(item, index) in scope.row.orderItems" :key="index">
						  <div class="orderItem-box">
							<div style="width: 30%;">
								<img style="width: 98%;" :src="item.productImage"  alt=""/>
							</div> 
							 <div style="width: 68%;">
								 <p>商品名: {{ item.productName }}</p>
								 <p>单价: {{ item.productPrice }} &nbsp;数量: {{ item.number}}</p>
								 <!-- <!-- <p>描述: {{item.productDes }}</p> -->
							 </div>
						  </div>
						  <hr/>
						</div>
					 </template>
			</el-table-column>
			<el-table-column property="totalPrice" label="总价" align="center" sortable="custom"></el-table-column>
			<el-table-column property="createTime" label="下单时间" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px">{{ scope.row.createTime }}</span>
				</template>
			</el-table-column>
			<el-table-column property="updateTime" label="修改时间" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time"></i>
					<span style="margin-left: 5px">{{ scope.row.updateTime }}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="180" align="center">
				<template slot-scope="scope">
					<el-button
						plain
						icon="el-icon-edit"P
						type="primary"
						title="发货"
						size="small"
						@click="editModel(scope.row.orderNo, scope.row.userNo)"
					>发货</el-button>
					<el-button
						plain
						icon="el-icon-delete"
						type="danger"
						title="删除"
						size="small"
						@click="deleteModel(scope.row)"
					>删除</el-button>
				</template>
			</el-table-column>
		</el-table>

				<!-- 
		            分页
		            :tableData ---- 将 tableData 作为参数传递给子组件 Pagination
		            @emitPageData ---- 子组件 $emit 函数定义的 key
		            receivePageData ---- 父组件自定义函数，用于接收子组件 $emit 函数定义的 value
		        -->
				<Pagination :tableData="tableData" @emitPageData="receivePageData"></Pagination>
			</div>
		</template>
		<script>
		import Pagination from "@/components/fragments/Pagination.vue";
		export default {
			name: "OrderItem",
			components: {
				Pagination,
			},
			data: function () {
				return {
					// 查询参数
					search: {
						currentPage: 1,
						pageSize: 5,
						orderNo: "",
						sort: "",
						direction: "",
					},
					// 表格数据结构，参考 PageInfo
					tableData: {
						total: 20, // 总数据量
						pageNum: 1, // 当前页
						pageSize: 5, // 页长
						pages: 1, // 总页数
						list: [],
					},
				};
			},
			methods: {
				// 初始化表格数据
				initTableData: function () {
					// var self = this;
					// $.ajax({
					// 	url: "http://127.0.0.1:8888/api/account/users",
					// 	type: "post",
					// 	contentType: "application/json",
					// 	data: JSON.stringify(this.search),
					// 	success: function (result) {
					// 		self.tableData = result;
					// 	},
					// 	error: function (data) {
					// 		// TODO
					// 	},
					// });
					this.$Request
						.fetch_("/api/orders/selectOrderPage", "post", this.search)
						.then((result) => {
							console.log("8——————————*");
							console.log(result.data);
							console.log(result.data.records);
							var newResult  = result.data;
							this.tableData.list = result.data.records;
							this.tableData.total = result.data.total;
							this.tableData.pageNum = result.data.current;
							this.tableData.pageSize = result.data.size;
							this.tableData.pages = result.data.pages;
							
						})
						.catch((error) => {
							this.$message.error(error);
						});
				},
				// 接收分页组件 $emit 函数传递的值
				receivePageData: function (pageData) {
					this.search.currentPage = pageData.pageNum;
					this.search.pageSize = pageData.pageSize;
					this.initTableData();
				},
				// 自定义排序函数
				changeSort: function (obj) {
					this.search.sort = this.$Common.camecaseToLine(obj.prop);
					this.search.direction = obj.order == "descending" ? "desc" : "asc";
					this.initTableData();
				},
				// 接收编辑组件 $emit 函数传递的值
				receiveDialogData: function (showEditDialog) {
					this.dialogData.showEditDialog = showEditDialog;
					if (this.dialogData.id == 0) {
						this.search.currentPage = 1;
					} else {
						this.search.currentPage = this.tableData.pageNum;
					}
					this.initTableData();
				},
				// 新增 model
				// addModel: function () {
				// 	this.dialogData = {
				// 		id: 0,
				// 		showEditDialog: true,
				// 	};
				// },
				
				// 发货
				editModel: function (orderNo, userNo) {
					this.$Request
						.fetch_("/api/orders/submitOrderAdmin/" + orderNo + "/" + userNo, 'put', {})
						.then((result) => {
							if (result.status == this.$Request.OK_CODE) {
							this.$message({
								message: "修改订单状态成功",
								type: "success",
								duration: 2 * 1000,
							});
							this.initTableData();
							} else {
								this.$message.error(result.message);
							}
						})
						.catch((error) => {
							this.$message.error(error);
						});
				},
				// 删除 model
				deleteModel: function (row) {
					this.$confirm("确定要删除当前行吗？", "删除", {
						comfirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
					})
				    .then(() => {
							console.log("0-0-0-0-0-0-0-0-0-0-0-0-0-");
							console.log(JSON.stringify(row));
							this.$Request
								.fetch_("/api/orders/deleteOrderByIdAdmin/" + row.orderNo, "delete", {})
								.then((result) => {
									if (result.status == this.$Request.OK_CODE) {
										this.$message({
											message: "删除成功",
											type: "success",
											duration: 2 * 1000,
										});
										this.search.currentPage = 1;
										this.initTableData();
									} else {
										this.$message.error(result.message);
									}
								})
								.catch((error) => {
									this.$message.error(error);
								});
						})
				},
				addSeparate(row) {
						return "separator-border"
				},
			},
			mounted() {
				this.initTableData();
			},
		};
		</script>
		<style>
		.table-div {
			margin-top: 10px;
		}
		.filter-item {
			float: right;
			width: 200px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			/* margin-right: 5px; */
		}
		.button-item {
			float: left;
			width: 100px;
			display: inline-block;
			vertical-align: middle;
			margin-bottom: 10px;
			margin-right: 5px;
		}
		.orderItem-box {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		.separator-border {
			border-right: 1px solid #eeeff2!important;
		}
		</style>